<template>
  <div>
    <p>我是购物车页</p>
    <!-- 标准语法:操作子模块user中的数据 -->
    <p>
      store中user模块中的数据age:{{ $store.state.user.username }}--{{
        $store.state.user.age
      }}
    </p>
    <p>
      store中user模块的计算属性tenTimes:{{ $store.getters["user/tenTimes"] }}
    </p>
    <p>
      <button @click="addAgeFn">age+1</button>
      <button @click="addAgeStepFn">age+10</button>
      <button @click="addAgeAsyncFn">异步方法age+1</button>
      <button @click="addAgeAsyncStepFn">异步方法age+10</button>
    </p>
  </div>
</template>

<script>
export default {
  name: "",
  props: [""],
  data() {
    return {};
  },
  created() {
    // console.log("car", this.$route.params);
    console.log(this);
  },
  methods: {
    addAgeFn() {
      // console.log(this);
      // 语法:  this.$store.commit("模块名/addAge");
      this.$store.commit("user/addAge");
    },
    addAgeStepFn() {
      this.$store.commit("user/addAgeStep", 10);
    },
    addAgeAsyncFn() {
      this.$store.dispatch("user/addAgeAsync");
    },
    addAgeAsyncStepFn() {
      this.$store.dispatch("user/addAgeStepAsync", 10);
    },
  },
};
</script>
<style scoped>
</style>